<template>
  <a-input
    v-model:value.trim="searchText"
    class="search-input"
    placeholder="搜索团队成员姓名&电子邮箱地址"
  >
    <template #prefix> <search-outlined /> </template>
  </a-input>
  <a-button type="primary" @click="handleAddMember">
    <plus-outlined />添加成员</a-button
  >
  <div class="user-list">
    <div class="user-card" v-for="user in users" :key="user.id">
      <a-avatar shape="square" size="large">
        <template #icon><UserOutlined /></template>
      </a-avatar>
      <div class="user-content">
        <div>
          <p>{{ user.name }}</p>
          <p>
            角色：<span>{{ roleMap[user.role] }}</span>
          </p>
        </div>
        <div>
          <p>
            授权级别：<a-popconfirm
              ok-text="保存"
              cancel-text="取消"
              @confirm="handleAuthChange"
              @visibleChange="(visible:boolean) => visible && (auth = user.auth)"
            >
              <template #title>
                <p>请确认想要修改的授权级别</p>
                <a-radio-group v-model:value="auth" :options="authOptions">
                </a-radio-group>
              </template>
              <a>{{ authMap[user.auth] }} <edit-outlined /></a>
            </a-popconfirm>
          </p>
          <!-- <p v-if="user.auth !== AuthEnum.Manager">
            授权范围：<a-button
              size="small"
              type="link"
              @click="handleIndicatorAuthChange(user)"
              >编辑授权</a-button
            >
          </p> -->
        </div>
      </div>
    </div>
  </div>
  <a-button type="primary" href="#/project/detail/fill">继续</a-button>
</template>
<script lang="ts" setup>
import { obj2list } from "@/utils";
import { ref } from "vue";
const enum AuthEnum {
  Manager,
  Member,
}
const authMap: Record<AuthEnum, any> = {
  [AuthEnum.Manager]: "管理员",
  [AuthEnum.Member]: "成员",
};
const authOptions = obj2list(authMap, true);
const enum RoleEnum {
  Editor,
}
const roleMap: Record<RoleEnum, any> = {
  [RoleEnum.Editor]: "资料填报",
};
const searchText = ref("");
const users = ref([
  {
    id: 1,
    name: "宋佳人",
    auth: AuthEnum.Manager,
    role: RoleEnum.Editor,
  },
  {
    id: 2,
    name: "宋佳人",
    auth: AuthEnum.Member,
    role: RoleEnum.Editor,
  },
]);
const auth = ref();
const handleAddMember = () => {
  // 添加成员
};
const handleAuthChange = () => {
  // 修改授权级别
};
// const handleIndicatorAuthChange = (user) => {};
</script>
<style lang="scss" scoped>
.search-input {
  width: 450px;
  margin-right: 16px;
}
.user-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% + 16px);
}
.user-card {
  width: 416px;
  border: 1px solid rgba(242, 242, 242, 1);
  border-radius: 4px;
  padding: 12px;
  margin-top: 16px;
  margin-right: 16px;
  display: flex;
  flex-flow: row nowrap;
}
.user-content {
  flex: 1;
  margin-left: 8px;
  & > * {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    & > * {
      flex: 1;
    }
  }
}
</style>
